<template>
  <x-skeleton class="m-my">
    <view class="header-bg"></view>
    <view class="user-info">
      <view class="info">
        <view class="avatar">
          <x-image v-if="userInfo && userInfo.headImg" :src="userInfo.headImg"/>
          <x-image v-else :src="AvatarNormal"/>
        </view>
        <view class="nick-name">
          <view v-if="userInfo && userInfo.nickname">
            {{ userInfo.nickname }}
          </view>
          <view v-else>
            微信用户
          </view>
          <view class="phone" v-if="userInfo">{{ userInfo.accountMobile }}</view>
        </view>
      </view>
      <view class="complaint" @click="handledToComplaint">
        交易投诉
      </view>
    </view>
    <view class="body">
      <view class="block order">
        <view class="dt" @click="onOrderList(-1)">
          <view class="name">我的订单</view>
          <view class="suffix">查看全部订单</view>
          <view class="icon">
            <x-icon name="icon-017" size="26" color="#A4A4A4"/>
          </view>
        </view>
        <view class="dd">
          <view class="li">

            <view class="item" @click="onOrderList(1)">
              <view class="icon">
                <x-image :src="MeoWallet"/>
                <!--              <view v-if="item.count > 0" class="_tips">{{ item.count }}</view>-->
              </view>
              <view class="name">待付款</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onOrderList(2)">
              <view class="icon">
                <x-image :src="MeoGroupLine"/>
              </view>
              <view class="name">待发货</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onOrderList(3)">
              <view class="icon">
                <x-image :src="MeoDeliver"/>
              </view>
              <view class="name">待收货</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onOrderList(4)">
              <view class="icon">
                <x-image :src="MeoReceiving"/>
              </view>
              <view class="name">待评价</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onOrderList(5)">
              <view class="icon">
                <x-image :src="MeoEvaluation"/>
              </view>
              <view class="name">已完成</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onOrderList(6)">
              <view class="icon">
                <x-image :src="MeoBackLine"/>
              </view>
              <view class="name">退款/售后</view>
            </view>
          </view>
        </view>
      </view>
      <view class="block order">
        <x-button transparent styles="background:#ffffff;border:none;">
          <view class="dt" @click="onServeList({value: 0})">
            <view class="name">我的服务</view>
          </view>
        </x-button>
        <view class="dd service">
          <view class="li">
            <view class="item" @click="onServeList({value: 0})">
              <view class="icon">
                <x-image :src="MesEvaluation"/>
              </view>
              <view class="name">我的评价</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onServeList({value: 0})">
              <view class="icon">
                <x-image :src="MesAddress"/>
              </view>
              <view class="name">收货地址</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onServeList({value: 0})">
              <view class="icon">
                <x-image :src="MesSuggest"/>
              </view>
              <view class="name">产品反馈</view>
            </view>
          </view>
          <view class="li">
            <view class="item" @click="onServeList({value: 0})">
              <view class="icon">
                <x-image :src="MesComplaint"/>
              </view>
              <view class="name">投诉商家</view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <view class="version">
      v-1.0.0
    </view>
  </x-skeleton>
</template>

<script setup>
import XImage from '@/components/x-image.vue';
import XIcon from '@/components/x-icon.vue';
import XButton from '@/components/x-button.vue';
import AvatarNormal from '@/assets/images/avatar-normal.png'
import MeoWallet from "@/assets/images/meo-wallet.png"
import MeoGroupLine from "@/assets/images/meo-group-line.png"
import MeoDeliver from "@/assets/images/meo-deliver.png"
import MeoReceiving from "@/assets/images/meo-receiving.png"
import MeoEvaluation from "@/assets/images/meo-evaluation.png"
import MeoBackLine from "@/assets/images/meo-back-line.png"
import MesEvaluation from '@/assets/images/mes-evaluation.png'
import MesAddress from '@/assets/images/mes-address.png'
import MesSuggest from '@/assets/images/mes-suggest.png'
import MesComplaint from '@/assets/images/mes-complaint.png'
import XSkeleton from "@/components/x-skeleton.vue";

const userInfo = {
  accountMobile: "186****3237"
}

function handledToComplaint() {

}

function onOrderList(status) {
  uni.navigateTo({url: '/pages/order/list?status=' + status})
}

function onServeList(status) {

}
</script>

<style lang="scss">
.m-my {
  position: relative;
  background-color: #eeeeee;

  .header-bg {
    width: 100%;
    height: 800rpx;
    position: absolute;
    top: 0;
    left: 0;
    //background-image: cdn('/images/me-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .user-info {
    display: flex;
    align-items: center;
    padding: 45rpx 0;

    .info {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 26rpx;
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 80rpx;
      margin-right: 12rpx;
      overflow: hidden;
    }

    .nick-name {
      font-size: 32rpx;
      color: #323233;
      line-height: 44rpx;
      text-align: left;
      margin-left: 8rpx;
    }

    .phone {
      font-size: 28rpx;
      color: #999999;
    }

    .complaint {
      line-height: 1;
      font-size: 30rpx;
      color: #fff;
      background: #E95449;
      border-radius: 48rpx 0 0 48rpx;
      padding: 15rpx 26rpx 15rpx 42rpx;
    }
  }

  .body {
    padding: 0 24rpx 24rpx;

    .block {
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .order {
      position: relative;

      .dt {
        border-bottom: 1rpx solid #F3F4F6;
        height: 100rpx;
        display: flex;
        align-items: center;
        padding: 0 26rpx;

        .name {
          flex: 1;
          font-size: 28rpx;
          text-align: left;
          color: #323233;
        }

        .suffix {
          font-size: 27rpx;
          color: #999999;
        }
      }

      .dd {
        padding: 20rpx 0;
        display: flex;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;

        .li {
          width: 33.33%;
        }

        .li-4 {
          width: 25%;
        }

        .item {
          padding: 20rpx;

          .icon {
            width: 48rpx;
            height: 48rpx;
            margin: 0 auto;
            position: relative;

            ._tips {
              position: absolute;
              top: -14rpx;
              right: -14rpx;
              min-width: 28rpx;
              height: 28rpx;
              padding: 0 8rpx;
              border-radius: 28rpx;
              background: #EB441F;
              color: #FFFFFF;
              font-size: 20rpx;
              display: flex;
              align-items: center;
              justify-content: center
            }
          }
        }

        .count {
          color: #323233;
          font-size: 36rpx;
          font-weight: bold;
        }

        .name {
          color: #333;
          font-size: 26rpx;
          padding-top: 10rpx;
        }
      }

      .service {
        padding: 20rpx 0;
      }
    }
  }

  .version {
    width: 100%;
    padding-bottom: 20rpx;
    text-align: center;
    color: #dddddd;
    font-size: 24rpx;
  }
}
</style>
